<template>
    <div class="smallB03 float-l">
        <a v-for="(item, i) in list" class="hover" v-bind:class="{active: index === i}" v-on:click="change(i)" v-bind:title="item.name" v-on:contextmenu.prevent="modify(i)"><span class="posa" v-text="item.name"></span></a>
    </div>
</template>

<script>
  import {Observer} from '../../core/util'
  import {fontstylelist} from './FontstyleList'
  // 段落组件
  export default {
    created: function () {
        var self = this;
        function editorCompleted(editor) {
            Observer.remove('editorCompleted', editorCompleted);
            editor.addListener('selectionchange', function () {
                self.show = true;
                var value = editor.queryCommandValue('fontstyle');
                for (var i = 0, len = self.list.length; i < len; i++) {
                    if (self.list[i].value === value) break;
                }
                self.index = i === len ? -1 : i;
            });
        }
        Observer.register('editorCompleted', editorCompleted);
    },
    data: function () {
        return {
            index: -1
        }
    },
    computed: {
        list: function () {
            return fontstylelist.slice(0, 5);
        }
    },
    methods: {
        change: function (i) {
            this.show = false;
            Observer.fire('execCommand', ['fontstyle', this.list[i].param]);
        },
        modify: function (i) {

        }
    }
  }

  export {fontstylelist}
</script>